<template>
  <div class="content">
    <p class="title">达人内容推荐</p>
    <div class="cbox">
      <header class="c1" v-for="(v, i) in zitext" :key="i">
        <div class="neirong">
          <img :src="v.img" alt="" class="i2" />

          <div class="center">
            <p>{{ v.name }}</p>
            <p>{{ v.time }}</p>
          </div>
          <div class="rightt">
            <button>关注</button>
          </div>
        </div>
        <p class="y1">{{ v.content }}</p>
        <img :src="v.imgs" alt="" class="i1" />
        <!-- <img src="imgs/j2.jpg" alt="" /> -->
      </header>
    </div>
    <!-- {{ zitext }} -->
  </div>
</template>
<script>
export default {
  props: ["zitext"],
};
</script>
<style scoped>
.content .title {
  height: 0.32rem;
  width: 100%;
  line-height: 0.32rem;
  font-size: 0.14rem;
  background-color: #f6f6f6;
  color: #cbcbcb;
  text-align: center;
  margin-top: 0.2rem;
}
.cbox {
  height: 0.64rem;
  margin-left: 0.2rem;
  display: flex;
  box-sizing: border-box;
  padding-top: 0.1rem;
}
.neirong {
  display: flex;
}
.cbox .neirong .i2 {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
}
.cbox .c1 .center {
  margin-left: 0.2rem;
  width: 0.5rem;
}
.cbox .c1 .center p {
  margin-bottom: 0.05rem;
}
.cbox .c1 .center p:nth-child(2) {
  color: #cbcbcb;
}
.c1 .rightt {
  /* height: 100%; */
  margin-left: 1.5rem;
  margin-top: 0.05rem;
}
.c1 .rightt button {
  background-color: #ff595b;
  color: #fff;
  padding: 5px 8px;
  border-radius: 0.2rem;
  margin-right: 0.2rem;
  width: 60px;
  /* margin-top: 0.1rem; */
  border: none;
}
.c1 .y1 {
  margin-top: 0.1rem;
}
.c1 .i1 {
  width: 2rem;
  height: 2rem;
  margin-top: 0.1rem;
  /* position: relative;
  top:0;
  left:0 */
}
</style>